<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back" @click="navigateBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="title">领券中心</view>
			<view class="right"></view>
		</view>

		<!-- 优惠券列表 -->
		<view class="bg" />
		<view class="coupon-list">
			<view class="coupon-item" v-for="(coupon, index) in coupons" :key="index">
				<view v-show="coupon.name!='新春购物券'">
				<!-- 左侧金额 -->
				<view class="coupon-left">
					<text class="symbol">¥</text>
					<text class="amount">{{ coupon.type==='满减券' ? coupon.preferentialMoney : coupon.discount }}</text>
				</view>

				<!-- 中间说明 -->
				<view class="coupon-center">
					<view class="condition">满{{ coupon.triggerMoney }}元可用</view>
					<view class="limit">仅限于{{ coupon.mid }}使用</view>
					<view class="date">{{ coupon.start }}—{{ coupon.end }}</view>
				</view>

				<!-- 右侧按钮 -->
				<view class="coupon-right">
					<button class="receive-btn" :class="{ 'received': coupon.status === 1, 'unavailable': coupon.status === 2 }"
						@click="coupon.status === 0 && receiveCoupon(coupon)" :disabled="coupon.status !== 0">
						{{ coupon.status === 0 ? '可领取' : coupon.status === 1 ? '已领取' : '不可领取' }}
					</button>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import baseUrl from '../../utils/urlConfig.js'
	// 定义响应式数据
	const coupons = ref([]);
	const userlist = ref([]);
	const userId = ref(0)




	onLoad((options) => {
		userId.value = options.id
		quanlist()
		console.log(options.id)
	});

	// 定义方法
	//获取优惠券列表
	function quanlist() {
		uni.request({
			url: baseUrl + '/yyq/coupon/list',
			method: 'GET',
			header: {
				Authorization: uni.getStorageSync('Token')
			},
			success: (res) => {
				console.log(res.data.rows)
				coupons.value = res.data.rows
				uni.request({
					url: baseUrl + '/yyq/usercoupon/getquan/' + userId.value,
					method: 'GET',
					header: {
						Authorization: uni.getStorageSync('Token')
					},
					success: res => {
						//用户获得的优惠券
						console.log('用户获得的优惠券', res.data.data)
						userlist.value = res.data.data
						// 判断 userlist 是否为空
						if (res.data.rows?.length === 0) {
							console.log('用户根据 id 查询的优惠券列表为空');
							// 你可以在这里添加提示用户的逻辑，比如显示弹窗
							uni.showToast({
								title: '您暂无优惠券',
								icon: 'none'
							});
						} else {
							console.log('用户有优惠券');
							// 过滤掉 userlist 中已有的优惠券
							coupons.value = coupons.value.filter(coupon => {
								return !userlist.value?.some(userCoupon => {
									// 假设优惠券通过 id 来唯一标识，根据实际情况修改
									return userCoupon.id === coupon.id;
								});
							});
						}
					}
				})

			}

		})
	}

	const navigateBack = () => {
		uni.navigateBack();
	};
	
	//增添领取
	// const concarUserCoupon = ref({
	// 	uId: userId.value,
	// 	cId: coupon.id,
	// 	num: 1,
	// 	expirationStart: formatDate(expirationStart),
	// 	expirationEnd: formatDate(expirationEnd),
	// 	status: 0
	// })
	const receiveCoupon = (coupon) => {
		uni.showLoading({
			title: '领取中...'
		});
		// 获取当前时间作为开始时间
		const expirationStart = new Date();
		// 获取一个月后的时间作为结束时间
		const expirationEnd = new Date();
		expirationEnd.setMonth(expirationEnd.getMonth() + 1);
		// 转换为 YYYY-MM-DD格式，根据后端要求调整
		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
		};
		uni.request({
			url: baseUrl + '/yyq/usercoupon',
			method: 'POST',
			data: {
					uId: userId.value,
					cId: coupon.id,
					expirationStart: formatDate(expirationStart),
					expirationEnd: formatDate(expirationEnd),
			},
			header: {
				Authorization: uni.getStorageSync('Token')
			},
			success: res => {
				//领取结果
				console.log(res)
				
			}
		});
		setTimeout(() => {
		  uni.hideLoading();
			uni.showToast({
				title: '领取成功',
				icon: 'success'
			});
		}, 1000);
	};
	
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 250rpx;
		background-color: #007aff;
	}

	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 44px;
		background-color: #007AFF;
		color: #fff;
		padding: 0 15px;

		.back {
			width: 44px;
		}

		.title {
			flex: 1;
			text-align: center;
			font-size: 18px;
		}

		.right {
			width: 44px;
		}
	}

	.coupon-list {
		margin-left: 10px;
		margin-right: 10px;
		margin-top: -200rpx;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		padding: 15px;

		.coupon-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 15px;
			padding: 15px;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				left: -4px;
				top: 50%;
				transform: translateY(-50%);
				width: 8px;
				height: 8px;
				background-color: #f5f5f5;
				border-radius: 50%;
			}

			&::after {
				content: '';
				position: absolute;
				right: -4px;
				top: 50%;
				transform: translateY(-50%);
				width: 8px;
				height: 8px;
				background-color: #f5f5f5;
				border-radius: 50%;
			}
		}
	}

	.coupon-left {
		width: 30px;
		display: flex;
		align-items: baseline;
		justify-content: center;
		color: #FF6B35;
		padding-right: 15px;
		border-right: 1px dashed #eee;

		.symbol {
			font-size: 16px;
			margin-right: 2px;
		}

		.amount {
			font-size: 32px;
			font-weight: bold;
		}
	}

	.coupon-center {
		flex: 1;
		padding: 0 15px;

		.condition {
			font-size: 16px;
			color: #333;
			margin-bottom: 5px;
		}

		.limit {
			font-size: 12px;
			color: #666;
			margin-bottom: 5px;
		}

		.date {
			font-size: 12px;
			color: #999;
		}
	}

	.coupon-right {
		width: 80px;

		.receive-btn {
			width: 70px;
			height: 30px;
			line-height: 30px;
			background-color: #FF6B35;
			color: #fff;
			font-size: 14px;
			border-radius: 15px;
			padding: 0;

			&.received {
				background-color: #ccc;
			}

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>